import { Typography, styled } from '@mui/material'
import CardList from '../components/cardlist/cardlist'
import SearchResult from '../components/catalog/searchResult'
import { GoBackButton } from '../components/shared/goBackButton'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const Catalog = () => (
	<StyledContainer>
		<GoBackButton />
		<StyledHeader>Каталог</StyledHeader>
		<SearchResult />
		<CardList />
	</StyledContainer>
)

export default Catalog
